<script setup lang="ts" name="SysMenuPage">
import { onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Card, notification } from 'ant-design-vue';

import { getAllMenuItemApi, getDicts } from '#/api';
import { $t } from '#/locales';

import * as api from './api';
import ResourceButtonTable from './button.vue';
import { menuForm } from './scheme';

const actionList = ref<any>([]);
const treeData = ref();
const expandedKeys = ref();
const itemTableRef = ref();
const [MenuForm, menuFormRef] = menuForm(onSubmit);
function onSubmit(values: Record<string, any>) {
  api.SaveOrUpdate(values).then(() => {
    menuFormRef.resetForm();
    // loadAreaTree();
    notification.success({
      description: '提交成功',
      duration: 3,
      message: $t('authentication.loginSuccess'),
    });
    menuFormRef.resetValidate();
  });
}
function getDictionary() {
  getDicts('sys_show_hide').then((response) => {
    const options = response.map((item: any) => {
      return { label: item.dictLabel, value: item.dictValue };
    });
    menuFormRef.updateSchema([
      { componentProps: { options }, fieldName: 'visible' },
    ]);
  });
  getDicts('sys_normal_disable').then((response) => {
    const options = response.map((item: any) => {
      return { label: item.dictLabel, value: item.dictValue };
    });
    menuFormRef.updateSchema([
      { componentProps: { options }, fieldName: 'status' },
    ]);
  });
}
onMounted(() => {
  getDictionary();
  loadMenu();
  menuFormRef.setState({ showDefaultActions: false });
});

// function handlePlus(node: any) {
// resetFields();
// setFieldsValue({ parentId: node.id });
// }

// function handleDelete(node: any) {
//   Modal.confirm({
//     iconType: 'warning',
//     title: '确认',
//     content: `确定删除 ${node.label} ？ 同时会级联删除子节点以及相关资源数据`,
//     onOk: async () => {
//       await api.DelObj(node.id).then(() => {
//         notification.success({
//           message: '删除成功',
//           duration: 3,
//         });
//         loadMenu();
//       });
//     },
//   });
// }
function handleTree(data: any, id: string, parentId: string, children: string) {
  const config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children',
  };

  const childrenListMap: any = {};
  const nodeIds: any = {};
  const tree = [];

  for (const d of data) {
    const parentId = d[config.parentId];
    if (
      childrenListMap[parentId] === null ||
      childrenListMap[parentId] === '' ||
      childrenListMap[parentId] === undefined
    ) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (const d of data) {
    const parentId = d[config.parentId];
    if (
      nodeIds[parentId] === null ||
      nodeIds[parentId] === '' ||
      nodeIds[parentId] === undefined
    ) {
      tree.push(d);
    }
  }

  for (const t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o: any) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (const c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}
function loadMenu() {
  getAllMenuItemApi().then((ret) => {
    treeData.value = handleTree(ret, 'menuId', 'parentId', 'children');
    // 这里需要做字段的处理
    expandedKeys.value = ret
      .filter((item: any) => item.parentId === 0)
      .map((item: any) => item.menuId);
    menuFormRef.resetValidate();
  });
}

function addDirectory() {
  itemTableRef.value.crudBinding.actionbar.buttons.add.show = false;
  itemTableRef.value.parentId = '0';
  menuFormRef.resetForm();
  menuFormRef.setValues({
    type: 'directory',
    parentId: '0',
  });
  menuFormRef.resetValidate();
  itemTableRef.value.setSearchFormData({ form: { parentId: '0' } });
  itemTableRef.value.doRefresh();
  menuFormRef.setState({ showDefaultActions: true });
}

function handleSelect(checkedKeys: any, event: any) {
  if (!event.selected) {
    return;
  }
  // FIX 调用 resetForm 方法会重新验证表单
  menuFormRef.resetForm();
  menuFormRef.resetValidate();
  menuFormRef.setState({ showDefaultActions: true });
  const selectNode = event.selectedNodes[0];
  const url = selectNode?.url;
  const fields = {
    ...selectNode,
    component: url || selectNode?.component,
  };
  // FIX 字段叫 component 会赋值异常
  menuFormRef.setValues(fields);
  // 只有菜单才会需要请求具体的按钮权限，其他的清空就行
  itemTableRef.value.crudBinding.addForm.initialForm = {
    parentId: selectNode.id,
  };
  itemTableRef.value.crudBinding.editForm.initialForm = {
    parentId: selectNode.id,
  };
  itemTableRef.value.crudBinding.actionbar.buttons.add.show =
    selectNode.component !== 'Layout' && selectNode?.children === undefined;
  itemTableRef.value.setSearchFormData({ form: { menuId: selectNode.menuId } });
  itemTableRef.value.doRefresh();
}
</script>

<template>
  <Page content-class="flex gap-2 sys-menu-view">
    <Card class="w-1/3">
      <template #extra>
        <a-button type="primary" @click="addDirectory">新增目录</a-button>
      </template>
      <a-tree
        v-model:expanded-keys="expandedKeys"
        :action-list="actionList"
        :auto-expand-parent="true"
        :default-expand-all="true"
        :tree-data="treeData"
        :field-names="{
          children: 'children',
          title: 'menuName',
          key: 'menuId',
        }"
        @select="handleSelect"
      />
    </Card>
    <Card class="w-1/2" title="菜单信息">
      <MenuForm />
    </Card>
    <Card class="w-1/2">
      <ResourceButtonTable ref="itemTableRef" />
    </Card>
  </Page>
</template>

<style lang="less" scoped>
/deep/ .p-4 {
  padding: 0.5rem;
}

/deep/ .sys-menu-view {
  .ant-card-body {
    padding: 12px;
  }

  .fs-container {
    min-height: 720px;
  }
}
</style>
